<template>
    <div class="root">
        <div class="top">
            <div class="search">
                <div style="display: flex;">
                    <el-input prefix-icon="el-icon-menu" placeholder="请输入书籍名称"
                        v-model="input" clearable>
                    </el-input>
                    <el-button class="top-btn" @click="search">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-table :data="pageData" :header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}" border>
                <el-table-column prop="recordBookName" label="书籍名称"></el-table-column>
                <el-table-column prop="recordBookAuthor" label="作者"></el-table-column>
                <el-table-column prop="recordBookPress" label="出版社"></el-table-column>
                <el-table-column prop="recordBookIsbn" label="标准ISBN"></el-table-column>
                <el-table-column prop="recordBookStatus" label="书籍状态">
                    <template slot-scope="scope">
                        {{scope.row.bookStatus == 0 ? '可借阅' : (scope.row.recordBookStatus == 1 ? '已借阅' : (scope.row.bookStatus == 2 ? '归还中' : '已下架'))}}
                    </template>
                </el-table-column>
                <el-table-column prop="recordBorrower" label="借阅人"></el-table-column>
                <el-table-column prop="recordBorrowTime" label="借阅时间">
                    <template slot-scope="scope">
                        {{ scope.row.recordBorrowTime.substring(0,10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="recordReturnTime" label="应归还时间">
                    <template slot-scope="scope">
                        {{ scope.row.recordReturnTime.substring(0,10) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" style="background-color: #6777ef; color: #fff; border: none;" @click="retbook(scope.row.recordId)">归还</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="footer">
            <el-pagination 
            background 
            layout="prev, pager, next, total"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-size="params.pageSize"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from '@/api/request.js'
export default {
    data() {
        return {
            input: '',
            pageData: [],
            //分页
            total: 100,
            params: {
                page: 1,
                pageSize: 10,
                name: ''
            }
        }
    },
    methods: {
        load() {
            api.recordPage(this.params).then(res => {
                if (String(res.data.code) === '1') {
                    this.pageData = res.data.data.records;
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            })
        },
        retbook(recordId) {
            this.$confirm('确定要还书？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 还书操作
                api.retbook(recordId).then(res => {
                    if (String(res.data.code) === '1') {
                        this.$message.success(res.data.data);
                        this.load();
                    }
                }).catch(error => {
                    console.log(error);
                    this.$message.error('出错啦');
                })
                }).catch(() => {
                this.$message({type: 'info', message: '已取消'});          
            });
            // api.retbook(recordId).then(res => {
            //     if (String(res.data.code) === '1') {
            //         this.$message.success(res.data.data);
            //         this.load();
            //     }
            // })
        },
        search() {
            if(this.input === ''){
                this.load();
                return;
            }
            api.findRecordByBookName(this.input).then(res => {
                if (String(res.data.code) === '1') {
                    this.pageData = res.data.data;
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            })
        },
        //分页查询
        handleCurrentChange(page) {
            // 点击分页按钮触发分页
            this.params.page = page
            this.load()
        }
    },
    created() {
        this.load();
    },
    mounted () {
        api.recordTotal().then(res => {
            this.total = res.data.data;
        })
    }
}
</script>

<style scoped>
.root {
        height: 100%;
    }

    .top {
        height: 10%;
        display: flex; 
        margin: 0 20px;
        align-items: center; 
        justify-content: space-between;
        /* background-color: beige; */
    }

    .bottom {
        /* height: 80%; */
        margin: 0 20px;
        background-color: rgb(133, 133, 98);
    }

    .footer {
        /* height: 10%; */
        margin: 1%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        /* background-color: black; */
    }

    .el-link {
        margin: 0 2px;
    }

    .top-btn:hover {
        border-color: #6777ef;
        color: #6777ef;
    }
</style>